import an58 from '@mmstudio/an000058';
import { Button, Form, Input, message } from 'antd';
import React from 'react';
import { ITbfdgroupTree } from './content';
import api from '../../../atoms/api';
import { Message as M1, Result as R1 } from '../../api/admin/groups/edit.api';

export default function Edit({
	data,
	onSave,
	onChange
}: {
	data: ITbfdgroupTree;
	onSave(v: ITbfdgroupTree): void;
	onChange(k: keyof M1, v: string | number): void;
}) {
	return <>
		<Form.Item required label="组别名称:">
			<Input placeholder='组别名称' disabled={!data} value={data && data.name} onChange={(e) => {
				onChange('name', e.target.value);
			}} />
		</Form.Item>
		<div className='save'>
			<Button disabled={!data} type='primary' onClick={async () => {
				if (!data
					|| !data && data.groupid
					|| !data && data.name
				) {
					message.error('缺少必要的参数');
					return;
				}
				const { children, ...rest } = data;
				const res = await an58<R1, M1>(api['/api/admin/groups/edit'], 'post', rest);
				if (res.ok === false) {
					message.error(res.message);
				} else {
					onSave(data);
					message.info('保存成功');
				}
			}}>保存</Button>
		</div>
		<style jsx>{`
.save{
display: flex;
flex-direction: row;
justify-content: center;
}
`}</style>
	</>;
}

